<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/Mdate/needcss/Mdate.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/Mdate/iScroll.js"></script>
    <script src="./js/Mdate/Mdate.js"></script>
</head>
<style>
    .release {
        float: right;
    }

    .topbg {
        width: 100vw;
        height: 40px;
        background-color: #3c70f6;
    }

    .mainContainer {
        margin-top: -2px;
        position: relative;

    }

    .contianer {
        margin: 10px 16px;
        background-color: white;
        padding: 16px;
        border-radius: 6px;
        position: relative;
    }


    .top {
        position: absolute;
        width: 100%;
        top: -10px;
        z-index: 9;
    }

    .head {
        height: 40px;
    }

    .addItem {
        text-align: center;
        line-height: 40px;
        height: 40px;
    }

    .foot {
        height: 20px;
    }

    .head .welcome {
        font-size: 12px;
        color: #c2c2c2;

    }

    .endTitle {
        font-size: 10px;
        color: #828692;
        background-color: #eceff3;
        width: auto;
        padding: 4px;
        border-radius: 0 0 4px 4px;
        position: absolute;
        top: 0;
    }

    .end {
        font-size: 12px;
        position: absolute;
        bottom: 6px;
    }

    #typeContainer {
        position: fixed;
        bottom: -164px;
        width: 100%;
        background-color: white;
        overflow: hidden;
        z-index: 999;
    }

    #typeContainer div {
        width: 25%;
        box-sizing: border-box;
        text-align: center;
        border: 0.1px solid #f4f4f4;
        float: left;
    }

    #typeContainer div p {
        width: 100%;
        margin: 30px 0;
    }

    .openTypeContainer {
        animation: openTypeContainer .5s;
        animation-fill-mode: forwards;
    }

    /*自定义动画*/
    @keyframes openTypeContainer {
        0% {
            transform: translateY(164px);
        }

        100% {
            transform: translateY(-164px);
        }
    }

    .closeTypeContainer {
        animation: closeTypeContainer .5s;
    }

    /*自定义动画*/
    @keyframes closeTypeContainer {
        0% {
            transform: translateY(-164px);
        }

        100% {
            transform: translateY(164px);
        }

    }

    #cover {
        position: fixed;
        top: 0;
        width: 100vw;
        overflow-y: scroll;
        height: 100%;
        z-index: 99;
        background-color: rgba(49, 47, 47, 0.3);
    }

    .itemTitle {
        margin-bottom: 10px;
        position: relative;
    }

    .other {
        width: 100px;
        height: 14px;
        margin-left: 6px;
        position: absolute;
        top: 50%;
        margin-top: -7px;
    }

    .label {
        margin-left: 6px;
    }

    .item {
        margin-top: 6px;
        position: relative;
    }

    .red {
        color: red;
        margin-right: 4px;
    }

    .more {
        top: -10px;
        padding: 6px;
        position: absolute;
        right: 0;
    }

    .editTool {
        position: absolute;
        right: 10px;
        top: 38px;
        z-index: 9;
        border: 1px solid gray;
        width: 80px;
        text-align: center;
        border-radius: 6px;
        background-color: white;

    }

    .editTool p {
        padding: 6px 0;
        border-bottom: 1px solid gray;
    }

    .can {
        color: #000;
    }

    .notcan {
        color: gray;
    }
</style>

<body>
    <div id="app">
        <nav>
            <span class="back" @click="back">返回</span>
            <span class="navTitle">编辑</span>
            <span class="release" @click="release">发布</span>
        </nav>
        <div class="mainContainer">

            <div class="topbg"></div>
            <div class="top">
                <div class="contianer head" @click="goToEditHead">
                    <p class="title ell">{{ques_title}}</p>
                    </p>
                    <p class="welcome ell">{{ques_welcome}}</p>
                </div>

                <div class="contianer " v-for="(item,index) in items">
                    <p class="itemTitle"> <label class="red"
                            v-show="item.isMust">*</label>{{(index+1)+'.'+item.itemTitle}}
                        <span @click="showEditToolContext(index)" class="more">...</span>
                    <div class="editTool" v-show="showEditToolIndex==index">
                        <p @click="copyItem(index)">复制</p>
                        <p @click="topMove(index)":class="[index==0?'notcan':'can']" >上移</p>
                        <p @click="bottomMove(index)":class="[index==items.length-1?'notcan':'can']" >下移</p>
                        <p @click="itemDelete(index)">删除</p>
                    </div>
                    </p>

                    <div v-for="(item2,index2) in item.items" class="itemContainer item">
                        <input :type="item.type=='单选'?'radio':item.type=='多选'?'checkbox':'text'" disabled
                            :name="item.itemTitle" /> <label v-show="item.type!='填空'" class="label">
                            {{item2.type==='normal'?item2.msg:'其他'}}
                        </label>
                        <input class="other" type="text" v-if="item2.type==='other'">
                    </div>
                </div>

                <div class="contianer addItem" @click="addItem">添加题目</div>
                <div class="contianer foot">
                    <label class="label">截止日期</label><input type="text" class="other" v-model="ques_date" placeholder="选择日期" id="dateSelectorOne">
                </div>
                <div class="contianer foot">
                    <label class="label">金币</label><input type="number" class="other" v-model="ques_coin" placeholder="选择金币">
                </div>
                <div class="contianer foot" @click="goToEditFoot">
                    <label class="endTitle ell">结束语</label>
                    <p class="end">{{ques_end}}</p>
                </div>
            </div>




        </div>
        <div id="cover" @click="hide" v-show="openTypeContainer==1"></div>
        <div id="typeContainer"
            :class="[openTypeContainer==0?'':openTypeContainer==1?'openTypeContainer':'closeTypeContainer']">
            <div v-for="(item,index) in questypeData" @click="chooseType(item)">
                <p>{{item}}</p>
            </div>
        </div>
    </div>
</body>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            showEditToolIndex: -1,
            ques_title: "",
            ques_welcome: "",
            ques_date:"2021-12-06",
            ques_end: "您已完成本次问卷,感谢您的帮助与支持",
            openTypeContainer: 0, //0初次进入页面  1为打开 2为关闭
            questypeData: [
                "单选",
                "多选",
                "填空",
            ],
            items: [
                { "itemTitle": "q", "isMust": false, "items": [{ "msg": "q", "type": "normal" }, { "msg": "q", "type": "other" }], "type": "单选" },
                { "itemTitle": "q11111", "isMust": true, "items": [{ "msg": "q", "type": "normal" }, { "msg": "q", "type": "other" }], "type": "多选" },
                // { "itemTitle": "q", "isMust": true, "items": [{ "msg": "q", "type": "normal" }, { "msg": "q", "type": "other" }], "type": "多选" },
                // { "itemTitle": "q","isMust": true,"items":[1], "type": "填空" },
                // { "itemTitle": "q","isMust": true, "items": [{ "msg": "q", "type": "normal" }, { "msg": "q", "type": "other" }], "type": "单选" },
                // { "itemTitle": "q","isMust": true, "items": [{ "msg": "q", "type": "normal" }, { "msg": "q", "type": "other" }], "type": "单选" },
            ],
        },
        created: function () {
            this.ques_title = EditQuesJSFace.getData("title")
            EditQuesJSFace.log(EditQuesJSFace.getData("title"))
            this.ques_welcome = EditQuesJSFace.getData("welcome")
        },
        methods: {
            release: function () {
                
                let utimateData = {
                    ques_title:this.ques_title,
                    ques_welcome:this.ques_welcome,
                    ques_end:this.ques_end,
                    items:this.items,
                    ques_date:this.ques_date,
                    ques_coin:this.ques_coin,
                }
             for (const key in utimateData) {
                if(utimateData[key]===""||utimateData[key]===undefined){
                    EditQuesJSFace.hint("请输入完整内容")
                    return
                }
             }
                EditQuesJSFace.release(JSON.stringify(utimateData))
            },
            setHead:function(title,head){
                this.ques_title = title
                this.ques_welcome = head
            },
            setFoot:function(end){
                this.ques_end = end
            },
            goToEditHead:function(){
                EditQuesJSFace.goToEditHead(this.ques_title,this.ques_welcome)
            },
            goToEditFoot:function(){
                EditQuesJSFace.goToEditFoot(this.ques_end)
            },
            itemDelete:function(index){
                this.items.splice(index,1)
            },
            bottomMove: function (index) {
                if (index >= this.items.length - 1) {
                    return
                }
                this.items.splice(
                    index + 1,
                    1,
                    ...this.items.splice(index, 1, this.items[index + 1])
                );
                this.showEditToolIndex = -1
            },
            topMove: function (index) {
                if (index <= 0) {
                    return
                }
                this.items.splice(
                    index,
                    1,
                    ...this.items.splice(index - 1, 1, this.items[index])
                );
                this.showEditToolIndex = -1
            },
            copyItem: function (index) {
                this.items.splice(index + 1, 0, this.items[index])
            },
            showEditToolContext: function (index) {
                // console.log(index);
                if (this.showEditToolIndex === index) {
                    this.showEditToolIndex = -1
                    return
                }
                this.showEditToolIndex = index
            },
            getItem: function (data) {
                // EditQuesJSFace.log(data)
                this.items.push(JSON.parse(data))
            },
            back: function () {
                EditQuesJSFace.back()
            },
          
            chooseType(item) {
                this.hide()
                // 进入编辑选项页面
                EditQuesJSFace.goToEditChoose(item)
            },
            hide: function () {
                this.openTypeContainer == 1 ? this.openTypeContainer = 2 : this.openTypeContainer = 1;
            },
            addItem: function () {
                if (this.openTypeContainer == 0 || this.openTypeContainer == 2) {
                    this.openTypeContainer = 1
                } else {
                    this.openTypeContainer = 2

                }
            }
        }
    })

    document.querySelector('#app').addEventListener('touchmove', (e) => {
        app.showEditToolIndex = -1
    }, false);




    new Mdate("dateSelectorOne",{
    beginYear: "2022",
    beginMonth: "1",
    beginDay: "6",
    endYear: "2099",
    endMonth: "1",
    endDay: "1",
    format: "-",
});

</script>

</html>